<script lang="tsx" setup>
import { nextTick, ref } from "vue";
import { UUID } from "uuidjs";
import { useElementSize } from "@vueuse/core";
import useResetTableRef from "@/hooks/common/resetTableRef";
import { get } from "@/service/api/api";
import LineChart from "./line-chart.vue";
// interface Emits {
//   (e: 'search', model: any): void;
//   (e: 'reset', model: any): void;
// }
// const emit = defineEmits<Emits>();
//   const model = defineModel<any>('model', { required: true });
//   function search() {
//   emit('search', model.value);
// }

// function reset() {
//   model.value.locationId = null;
//   model.value.model = [];
//   emit('reset', model.value);
// }
const commonSearchRef = ref(null);
const [searchParams, retSearchParams] = useResetTableRef({
  moduleNo: null,
});
const formList = [
  {
    type: "input",
    key: "moduleNo",
    label: "工序名称",
    span: 16,
    placeholder: "请输入生产型号",
    showTime: true,
  },
];
const formList1 = [
  {
    type: "input",
    key: "moduleNo",
    label: "类型",
    span: 12,
    placeholder: "请输入生产型号",
    showTime: true,
  },
  {
    type: "dateRangePicker",
    key: "time",
    label: "出版日期",
    span: 12,
    placeholder: "请输入生产型号",
    showTime: true,
  },
];
const leftTableRef = ref(null);
const leftColumn = [
  {
    key: "dataIndex",
    dataIndex: "dataIndex",
    title: "序号",
    width: 50,
    align: "center",
    checked: true,
    ellipsis: true,
  },
  {
    key: "moduleNo",
    dataIndex: "moduleNo",
    title: "工艺",
    align: "center",
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-#646cff">{record.moduleNo}</span>;
    },
  },
  {
    key: "peType",
    dataIndex: "peType",
    title: "总面积",
    align: "center",
    checked: true,
    ellipsis: true,
  },
];

const checked = ref(true);

const rightTableRef = ref(null);
const rightSearchParams = ref({});

const rightColumn = [
  {
    key: "dataIndex",
    dataIndex: "dataIndex",
    title: "序号",
    width: 70,
    align: "center",
    checked: true,
    ellipsis: true,
  },
  {
    key: "techName",
    dataIndex: "techName",
    title: "出板时间",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "repeatCount",
    dataIndex: "repeatCount",
    title: "层数",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "wipPnlQty",
    dataIndex: "wipPnlQty",
    title: "Pnl数量",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "wipSetQty",
    dataIndex: "wipSetQty",
    title: "Pnl面积",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "wipscrapSet",
    dataIndex: "wipscrapSet",
    title: "Set数量",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "wipscrapPcs",
    dataIndex: "wipscrapPcs",
    title: "Set面积",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "wippcsQty",
    dataIndex: "wippcsQty",
    title: "Unit数量",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "applyScrapQty",
    dataIndex: "applyScrapQty",
    title: "Unit面积",
    align: "center",
    checked: true,
    ellipsis: true,
    width: 120,
  },
  {
    key: "applyReworkQty",
    dataIndex: "applyReworkQty",
    title: "折合双面板约当量面积",
    align: "center",
    checked: true,
    ellipsis: true,
  },

  // { header: "结存小时", dataIndex: 'delayDate', renderer: function (v) { if (v) return Ext.util.Format.number(v, '0.00') }, width: 60, sortable: false }
];

const topCardRef = ref(null);
const { height } = useElementSize(topCardRef);

function search() {
  leftTableRef.value.getData();
}

function reset() {
  retSearchParams();
  search();
}

const rightDataSource = ref([]);
const rightTopData = ref({
  totalQty: null, // 有效单元
  unitArea: null, // 单元面积
  totalArea: null, // 有效面积
  pnlArea: null, // pnl面积
  endOfLife: null, // 报废特性
  pnlSet: null, // pnlSet
  setPcs: null, // setPcs
});
const rightLoading = ref(false);

function handleLeftTableRowClick(row) {
  rightLoading.value = true;
  get("/erpsyncmes/wip/selectWipPubtechnology", {
    prodId: row.prodId,
  })
    .then(({ data, error }) => {
      if (!error) {
        rightTopData.value = data;
        data.pubtechnology.forEach((item, index) => {
          item.dataIndex = index + 1;
          item.tableUuid = UUID.genV4().hexNoDelim;
        });
        rightDataSource.value = data.pubtechnology;
      } else {
        rightTopData.value = null;
        rightDataSource.value = [];
      }
    })
    .finally(() => {
      rightLoading.value = false;
    });
}

const rightBottomTableRef = ref(null);
const rightBottomSearchParams = ref({
  prodId: null,
  techId: null,
});
function handleRightTableRowClick(row) {
  rightBottomSearchParams.value = {
    prodId: row.prodId,
    techId: row.techId,
  };
  nextTick(() => {
    rightBottomTableRef.value.getData();
  });
}

function handleLeftTableLoadSuccess(data) {
  if (!data?.length) return;
  leftTableRef.value.setCurrentRowId(data[0]);
  nextTick(() => {
    handleLeftTableRowClick(data[0]);
  });
}

function handleRightTableLoadSuccess(data) {
  console.log("data", data);
  if (!data?.length) return;
  rightBottomSearchParams.value = {
    prodId: data[0].prodId,
    techId: data[0].techId,
  };
  rightTableRef.value.setCurrentRowId(data[0]);
  nextTick(() => {
    rightBottomTableRef.value.getData();
  });
}
const activeKey = ref("1");
</script>

<template>
  <div class="h-full w-full">
    <div class="h-full w-full flex gap-8px">
      <div
        class="left-content h-full min-h-500px w-430px flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto"
      >
        <CommonSearch
          ref="commonSearchRef"
          v-model:searchParams="searchParams"
          :form-list="formList"
          @search="search"
          @reset="reset"
        ></CommonSearch>
        <Table
          ref="leftTableRef"
          v-model:searchParams="searchParams"
          :column="leftColumn"
          :show-row-selection="false"
          row-key="prodId"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          :auto-generate-uuid="true"
          class="h-full"
          url="/erpsyncmes/Mi/findModuleNo"
          :show-quick-jumper="false"
          @table-row-click="handleLeftTableRowClick"
          @table-data-load-sucess="handleLeftTableLoadSuccess"
        ></Table>
      </div>
      <div
        class="right-content h-full flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto"
      >
        <div class="w-full" :style="{ height: `calc(100% - 40px)` }">
          <div class="mb-0.5% h-54%">
            <CommonSearch
              ref="commonSearchRef"
              v-model:searchParams="searchParams"
              :form-list="formList1"
              @search="search"
              @reset="reset"
            ></CommonSearch>
            <Table
              ref="rightTableRef"
              v-model:searchParams="rightSearchParams"
              :column="rightColumn"
              :show-row-selection="false"
              row-key="tableUuid"
              :data-source="rightDataSource"
              :scroll="{ y: 'auto' }"
              :is-init-get-data="false"
              :loading="rightLoading"
              url="/erpsyncmes/wip/selectWipByProdIdAndTechId"
              :auto-generate-uuid="false"
              class="h-full"
              :is-pagination="false"
              summary-fixed
              @table-row-click="handleRightTableRowClick"
              @table-data-load-sucess="handleRightTableLoadSuccess"
            >
              <!-- <template #title>
                <span class="mr15px color-#646cff">WIP结存</span>
              </template> -->
              <template #summary>
                <STableSummaryRow>
                  <STableSummaryCell
                    :index="0"
                    :col-span="2"
                    class="text-center color-blue-600 font-bold"
                  >
                    本页合计:
                  </STableSummaryCell>

                  <STableSummaryCell
                    :index="2"
                    class="text-center color-blue-600 font-bold"
                  ></STableSummaryCell>
                  <STableSummaryCell
                    :index="3"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="4"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="5"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="6"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="7"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="8"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="9"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="10"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="11"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                  <STableSummaryCell
                    :index="12"
                    class="text-center color-blue-600 font-bold"
                  >
                    <template #default="{ total }">{{
                      Number(total) || ""
                    }}</template>
                  </STableSummaryCell>
                </STableSummaryRow>
              </template>
            </Table>
          </div>
          <div class="h-49.5%">
            <ARow >
              <ACol :span="24">
                <LineChart />
              </ACol>
            </ARow>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right-content {
  width: calc(100% - 438px);
  :deep(.ant-card) {
    &.top-card {
      .ant-card-head {
        min-height: 40px;
      }
    }
  }

  .content {
    :deep(.ant-descriptions) {
      .ant-descriptions-item-label,
      .ant-descriptions-item-content {
        padding: 3px;
      }
    }
  }
}
</style>
